<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI文书-日常管理-邮寄管理</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Microsoft YaHei', sans-serif; background: #f0f2f5; color: #333; min-height: 100vh; padding: 16px; }
        
        .container { background: white; border-radius: 8px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); max-width: 1600px; margin: 32px auto; }
        .page-title { font-size: 24px; font-weight: bold; color: #2c3e50; margin-bottom: 24px; }
        
        /* 筛选区域 */
        .filter-section { background: #fafafa; padding: 16px; border-radius: 4px; margin-bottom: 16px; }
        .filter-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; }
        .filter-left { display: flex; gap: 16px; align-items: end; }
        .form-group { margin-bottom: 0; }
        .form-label { display: block; margin-bottom: 8px; color: #666; font-size: 14px; }
        .form-input, .form-select { width: 200px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; background: white; }
        .date-range { display: flex; gap: 8px; align-items: center; }
        .date-range input { width: 140px; }
        
        /* 按钮样式 */
        .btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.3s; }
        .btn-primary { background: #1890ff; color: white; }
        .btn-primary:hover { background: #40a9ff; }
        .btn-reset { background: #f5f5f5; color: #666; border: 1px solid #ddd; }
        .btn-reset:hover { background: #e6f7ff; }
        .btn-success { background: #52c41a; color: white; }
        .btn-success:hover { background: #73d13d; }
        .btn-danger { background: #ff4d4f; color: white; }
        .btn-danger:hover { background: #ff7875; }
        .btn-group { display: flex; gap: 8px; }
        
        /* 表格样式 */
        .table-container { overflow-x: auto; margin-bottom: 16px; }
        table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #e8e8e8; border-radius: 4px; }
        th, td { padding: 12px; text-align: left; border-bottom: 1px solid #e8e8e8; font-size: 14px; }
        th { background: #fafafa; font-weight: 500; color: #666; white-space: nowrap; }
        td { background: white; }
        tr:last-child td { border-bottom: none; }
        
        /* 类型标签样式 */
        .type-tag { padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; }
        .type-document { background: #e6f7ff; color: #1890ff; }
        .type-letter { background: #f6ffed; color: #52c41a; }
        
        /* 分页样式 */
        .pagination { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
        .page-item { padding: 4px 12px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .page-item.active { background: #1890ff; color: white; border-color: #1890ff; }
        .page-item:hover:not(.active) { background: #f5f5f5; }
        
        /* 弹窗样式 */
        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
        .modal-content { background-color: #fefefe; margin: 5% auto; padding: 0; border: none; border-radius: 8px; width: 500px; max-height: 90vh; overflow-y: auto; }
        .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #e8e8e8; }
        .modal-title { font-size: 18px; font-weight: 500; color: #333; }
        .close { color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; }
        .close:hover { color: #000; }
        .modal-body { padding: 24px; }
        .modal-footer { padding: 16px 24px; border-top: 1px solid #e8e8e8; display: flex; justify-content: flex-end; gap: 12px; }
        
        /* 表单样式 */
        .modal-form { display: flex; flex-direction: column; gap: 16px; }
        .modal-form-group { display: flex; flex-direction: column; gap: 8px; }
        .modal-form-label { font-size: 14px; color: #666; font-weight: 500; }
        .modal-form-input, .modal-form-select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
        .modal-form-input:focus, .modal-form-select:focus { outline: none; border-color: #1890ff; }
        
        /* 操作按钮 */
        .action-btn { padding: 4px 8px; margin: 0 2px; font-size: 12px; }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="page-title">邮寄管理</h1>
        
        <!-- 筛选区域 -->
        <div class="filter-section">
            <form class="filter-form" id="filterForm" onsubmit="event.preventDefault(); applyFilters();">
                <div class="filter-left">
                    <div class="form-group">
                        <label class="form-label">案件编号</label>
                        <input class="form-input" id="filterCaseNo" placeholder="请输入案件编号">
                    </div>
                    <div class="form-group">
                        <label class="form-label">类型</label>
                        <select class="form-select" id="filterType">
                            <option value="">全部</option>
                            <option value="文书">文书</option>
                            <option value="信函">信函</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">邮寄日期</label>
                        <div class="date-range">
                            <input type="date" class="form-input" id="filterStartDate">
                            <span>至</span>
                            <input type="date" class="form-input" id="filterEndDate">
                        </div>
                    </div>
                </div>
                <div class="btn-group">
                    <button class="btn btn-primary" type="submit">查询</button>
                    <button class="btn btn-reset" type="button" onclick="resetFilters()">重置</button>
                    <button class="btn btn-success" type="button" onclick="openAddModal()">新增</button>
                </div>
            </form>
        </div>
        
        <!-- 表格区域 -->
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>案件编号</th>
                        <th>快递单号</th>
                        <th>类型</th>
                        <th>邮寄日期</th>
                        <th>邮寄人</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="dataTbody"></tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        <div class="pagination" id="pagination"></div>
    </div>

    <!-- 新增邮寄弹窗 -->
    <div id="addMailModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title">新增邮寄记录</span>
                <span class="close" onclick="closeAddModal()">&times;</span>
            </div>
            <div class="modal-body">
                <form class="modal-form" id="addMailForm">
                    <div class="modal-form-group">
                        <label class="modal-form-label">案件编号 <span style="color: red;">*</span></label>
                        <select class="modal-form-select" id="caseNumber" required>
                            <option value="">请选择案件</option>
                            <option value="CASE-2023-011">CASE-2023-011 - 法医临床鉴定</option>
                            <option value="CASE-2023-012">CASE-2023-012 - 法医病理鉴定</option>
                            <option value="CASE-2023-013">CASE-2023-013 - 医疗损害鉴定</option>
                            <option value="CASE-2023-014">CASE-2023-014 - 法医毒物鉴定</option>
                            <option value="CASE-2023-015">CASE-2023-015 - 法医精神病鉴定</option>
                            <option value="CASE-2023-016">CASE-2023-016 - 法医物证鉴定</option>
                        </select>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">快递单号 <span style="color: red;">*</span></label>
                        <input class="modal-form-input" id="trackingNumber" placeholder="请输入快递单号" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">类型 <span style="color: red;">*</span></label>
                        <select class="modal-form-select" id="mailType" required>
                            <option value="">请选择类型</option>
                            <option value="文书">文书</option>
                            <option value="信函">信函</option>
                        </select>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">邮寄日期 <span style="color: red;">*</span></label>
                        <input class="modal-form-input" id="mailDate" type="date" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">邮寄人 <span style="color: red;">*</span></label>
                        <input class="modal-form-input" id="sender" placeholder="请输入邮寄人姓名" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-reset" onclick="closeAddModal()">取消</button>
                <button class="btn btn-primary" onclick="submitMail()">确定</button>
            </div>
        </div>
    </div>

    <script>
        // 模拟数据
        const mockData = [
            {
                id: 1, caseNo: 'CASE-2023-001', trackingNumber: 'SF1234567890123', type: '文书', 
                mailDate: '2023-01-20', sender: '张秘书', createTime: '2023-01-20 09:30:00'
            },
            {
                id: 2, caseNo: 'CASE-2023-003', trackingNumber: 'YTO9876543210987', type: '信函', 
                mailDate: '2023-02-15', sender: '李助理', createTime: '2023-02-15 14:20:00'
            },
            {
                id: 3, caseNo: 'CASE-2023-005', trackingNumber: 'ZTO5555666677778', type: '文书', 
                mailDate: '2023-03-01', sender: '王主管', createTime: '2023-03-01 10:45:00'
            },
            {
                id: 4, caseNo: 'CASE-2023-007', trackingNumber: 'STO3333444455556', type: '信函', 
                mailDate: '2023-03-10', sender: '赵专员', createTime: '2023-03-10 16:15:00'
            },
            {
                id: 5, caseNo: 'CASE-2023-009', trackingNumber: 'EMS1111222233334', type: '文书', 
                mailDate: '2023-03-25', sender: '钱文员', createTime: '2023-03-25 11:30:00'
            }
        ];

        let filteredData = [...mockData];
        let currentPage = 1;
        const pageSize = 5;

        // 获取类型标签样式
        function getTypeClass(type) {
            return type === '文书' ? 'type-document' : 'type-letter';
        }

        // 渲染表格
        function renderTable() {
            const tbody = document.getElementById('dataTbody');
            tbody.innerHTML = '';
            
            const start = (currentPage - 1) * pageSize;
            const end = start + pageSize;
            const pageData = filteredData.slice(start, end);

            pageData.forEach((item, index) => {
                const typeClass = getTypeClass(item.type);
                tbody.innerHTML += `
                    <tr>
                        <td>${start + index + 1}</td>
                        <td>${item.caseNo}</td>
                        <td>${item.trackingNumber}</td>
                        <td><span class="type-tag ${typeClass}">${item.type}</span></td>
                        <td>${item.mailDate}</td>
                        <td>${item.sender}</td>
                        <td>${item.createTime}</td>
                        <td>
                            <button class="btn btn-danger action-btn" onclick="deleteMail(${item.id})">删除</button>
                        </td>
                    </tr>
                `;
            });
        }

        // 渲染分页
        function renderPagination() {
            const total = filteredData.length;
            const pageCount = Math.ceil(total / pageSize);
            const container = document.getElementById('pagination');
            container.innerHTML = '';
            
            if (pageCount <= 1) return;

            // 上一页
            container.innerHTML += `<span class="page-item" onclick="gotoPage(${Math.max(1, currentPage - 1)})" ${currentPage === 1 ? 'style="color:#ccc;cursor:not-allowed;"' : ''}>上一页</span>`;
            
            // 页码
            for (let i = 1; i <= pageCount; i++) {
                container.innerHTML += `<span class="page-item ${i === currentPage ? 'active' : ''}" onclick="gotoPage(${i})">${i}</span>`;
            }
            
            // 下一页
            container.innerHTML += `<span class="page-item" onclick="gotoPage(${Math.min(pageCount, currentPage + 1)})" ${currentPage === pageCount ? 'style="color:#ccc;cursor:not-allowed;"' : ''}>下一页</span>`;
        }

        // 跳转页面
        function gotoPage(page) {
            const pageCount = Math.ceil(filteredData.length / pageSize);
            if (page < 1 || page > pageCount) return;
            currentPage = page;
            renderTable();
            renderPagination();
        }

        // 应用筛选
        function applyFilters() {
            const caseNo = document.getElementById('filterCaseNo').value.trim();
            const type = document.getElementById('filterType').value;
            const startDate = document.getElementById('filterStartDate').value;
            const endDate = document.getElementById('filterEndDate').value;
            
            filteredData = mockData.filter(item => {
                let match = true;
                
                if (caseNo && !item.caseNo.includes(caseNo)) match = false;
                if (type && item.type !== type) match = false;
                if (startDate && item.mailDate < startDate) match = false;
                if (endDate && item.mailDate > endDate) match = false;
                
                return match;
            });
            
            currentPage = 1;
            renderTable();
            renderPagination();
        }

        // 重置筛选
        function resetFilters() {
            document.getElementById('filterForm').reset();
            filteredData = [...mockData];
            currentPage = 1;
            renderTable();
            renderPagination();
        }

        // 打开新增弹窗
        function openAddModal() {
            document.getElementById('addMailModal').style.display = 'block';
            // 设置默认邮寄日期为今天
            document.getElementById('mailDate').value = new Date().toISOString().split('T')[0];
        }

        // 关闭新增弹窗
        function closeAddModal() {
            document.getElementById('addMailModal').style.display = 'none';
            document.getElementById('addMailForm').reset();
        }

        // 提交新增邮寄记录
        function submitMail() {
            const form = document.getElementById('addMailForm');
            if (!form.checkValidity()) {
                alert('请填写所有必填项');
                return;
            }

            const caseNo = document.getElementById('caseNumber').value;
            const trackingNumber = document.getElementById('trackingNumber').value;
            const type = document.getElementById('mailType').value;
            const mailDate = document.getElementById('mailDate').value;
            const sender = document.getElementById('sender').value;

            // 检查快递单号是否已存在
            if (mockData.some(item => item.trackingNumber === trackingNumber)) {
                alert('快递单号已存在');
                return;
            }

            const newMail = {
                id: mockData.length + 1,
                caseNo: caseNo,
                trackingNumber: trackingNumber,
                type: type,
                mailDate: mailDate,
                sender: sender,
                createTime: new Date().toLocaleString('zh-CN')
            };

            mockData.push(newMail);
            alert('邮寄记录添加成功');
            closeAddModal();
            applyFilters();
        }

        // 删除邮寄记录
        function deleteMail(id) {
            if (confirm('确定要删除此邮寄记录吗？')) {
                const index = mockData.findIndex(item => item.id === id);
                if (index !== -1) {
                    mockData.splice(index, 1);
                    alert('删除成功');
                    applyFilters();
                }
            }
        }

        // 点击弹窗外部关闭
        document.addEventListener('click', function(e) {
            if (e.target === document.getElementById('addMailModal')) {
                closeAddModal();
            }
        });

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            renderTable();
            renderPagination();
        });
    </script>
</body>
</html> 